var type="黑鲷鱼";
    //第一个图表，产品的价格折线图
    var chart1 = echarts.init(document.querySelector('.line .chart'));
    var option1 = {
      title:{
          text:type+"价格走势图",
          textStyle:{
            color:"#4c9bfd"
          },
          left:"center"
      },
      // 设置网格样式
      grid: { 
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        show: true,// 显示边框
        borderColor: '#012f4a',// 边框颜色
        containLabel: true // 包含刻度文字在内
      },
      tooltip: {
        trigger: "axis"
      },
      // 图例组件
    legend: {
        textStyle: {
          color: '#4c9bfd' // 图例文字颜色
        },
        right: '10%' // 距离右边10%
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
           show: false // 去除刻度线
         },
         axisLabel: {
           color: '#4c9bfd' // 文本颜色
         },
         axisLine: {
           show: false // 去除轴线
         },
         boundaryGap: false  // 去除轴内间距
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: false  // 去除刻度
        },
        axisLabel: {
          color: '#4c9bfd' // 文字颜色
        },
        splitLine: {
          lineStyle: {
            color: '#012f4a' // 分割线颜色
          }
        }
      },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
chart1.setOption(option1)
 // 4. 让图表跟随屏幕自动的去适应
 window.addEventListener("resize", function() {
    chart1.resize();
  });
// 第二个图表产量柱状图
 // 1实例化对象
 var chart2 = echarts.init(document.querySelector(".bar .chart"));
 // 2. 指定配置项和数据
 var option2 = {
   title:{
       text:type+"产量",
       textStyle:{
        color:"#4c9bfd"
      },
      left:"center",
      top:"5px"
   },
   color: ["#2f89cf"],
   tooltip: {
     trigger: "axis",
     axisPointer: {
       // 坐标轴指示器，坐标轴触发有效
       type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
     }
   },
   // 修改图表的大小
   grid: {
    top: '20%',
    left: '3%',
    right: '4%',
    bottom: '3%',
     containLabel: true
   },
   xAxis: [
     {
       type: "category",
       data: [
         "旅游行业",
         "教育培训",
         "游戏行业",
         "医疗行业",
         "电商行业",
       ],
       axisTick: {
         alignWithLabel: true
       },
       // 修改刻度标签 相关样式
       axisLabel: {
         color: "#4c9bfd ",
         fontSize: "12"
       },
       // 不显示x坐标轴的样式
       axisLine: {
         show: false
       }
     }
   ],
   yAxis: [
     {
       type: "value",
       // 修改刻度标签 相关样式
       axisLabel: {
         color: "#4c9bfd ",
         fontSize: 12
       },
       // y轴的线条改为了 2像素
       axisLine: {
         lineStyle: {
           color: "rgba(255,255,255,.1)",
           width: 2
         }
       },
       // y轴分割线的颜色
       splitLine: {
         lineStyle: {
           color: "rgba(255,255,255,.1)"
         }
       }
     }
   ],
   series: [
     {
       name: "直接访问",
       type: "bar",
       barWidth: "35%",
       data: [200, 300, 300, 900, 1500, 1200, 600],
       itemStyle: {
         // 修改柱子圆角
         barBorderRadius: 5
       }
     }
   ]
 };
 // 3. 把配置项给实例对象
 chart2.setOption(option2);
 // 4. 让图表跟随屏幕自动的去适应
 window.addEventListener("resize", function() {
   chart2.resize();
 });

 //第三个图形
 var chart3= echarts.init(document.querySelector(".pie .chart"));
 var option3 = {
    title:{
        text:type+"销往地",
        textStyle:{
         color:"#4c9bfd"
       },
       left:"center",
       top:"5px"
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
// 3. 把配置项给实例对象
chart3.setOption(option3);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function() {
  chart3.resize();
});
//